<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>青听音乐</title>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <script src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/icons_20662_26.49f8a9705e887ed046bf44b586f49688.js"></script>
</head>
<body>
<div class="container" id="app">
    <div class="main">
        <input type="checkbox" id="playlist-drawer-toggle" name="drawer-toggle" placeholder="实现抽屉项目的复选框"/>
        <label for="playlist-drawer-toggle" id="playlist-drawer-toggle-label"></label>
        <div class="playlist" id="playlist">
            <h2 class="playlist-name">默认播放列表</h2>
            <ul class="list-container">
                <li class="music-item" v-for="(item,index) in musicList" @dblclick='playMusic(index)'
                    :class="{'music-item-active':index==currentIndex}">
                    <div class="left">
                        <div class="like-icon"></div>
                        <div class="music-cover"></div>
                        <span class="music-name" :title="item.ShowName">{{item.ShowName}}</span>
                    </div>
                    <div class="right">
                        <div class="music-duration">{{item.Duration}}</div>
                    </div>
                </li>
            </ul>
        </div>

        <div class="lyric-area">
            <div class="lyric-top">
                <div class="search-box">
                    <button class="search-btn" @click="searchMusic">
                        <iconpark-icon name="search" size="18"></iconpark-icon>
                    </button>
                    <input type="text" class="search-input" placeholder="搜索音乐" v-model="query"
                           @keyup.enter="searchMusic">
                </div>
            </div>
            <div class="lyric-bottom">
                <div class="lyrics-show" ref="lyricsShow">
                    <div class="lyrics-display" ref="lyricsDisplay">
                        <div v-for="(item,index) in currentMusicLyrics"
                             :class="{'lyric-active':index == (musicLyricIndex - 1),'lyric-out':(index == (musicLyricIndex - 5)||index == (musicLyricIndex - 4)||index==(musicLyricIndex + 3))}">
                            {{item.lyric}}
                        </div>
                    </div>
                </div>
                <canvas id="canvas"></canvas>
            </div>
        </div>
    </div>

    <div class=" bottom">

        <div class="music-progress-track">
            <div class="music-progress-slider" ref="musicProgress">
                <div class="music-progress-thumb" id="music-pin"></div>
            </div>
        </div>

        <div class="music-control-left">
            <div class="music-cover" ref="bg"></div>
            <div class="music-info">
                <div class="music-name" title="Lavender Haze (Explicit)">
                    <span class="roll-text">{{currentMusic.Name}}</span>
                </div>
                <div class="music-artist">{{currentMusic.Artists}}</div>
            </div>
        </div>

        <div class="music-control-mid">
            <button class="prev-control" id="prevBtn" @click="preSong">
                <iconpark-icon name="go-start" size="30"></iconpark-icon>
            </button>
            <button class="play-control" id="playBtn" @click="playOrPause">
                <iconpark-icon name="play-one" size="50"></iconpark-icon>
            </button>
            <button class="next-control" id="nextBtn" @click="nextSong()">
                <iconpark-icon name="go-end" size="30"></iconpark-icon>
            </button>
        </div>

        <div class="music-control-right">
            <div class="music-play-time">
                <span class="current-time">{{durationConvert(currentTime,1)}}</span><span
                    class="time-separator">/</span><span class="total-music">{{durationConvert(totalTime,1)}}</span>
            </div>

            <div class="volume-control-wrap">
                <button class="volume-control-btn bottom-music-button">
                    <iconpark-icon name="volume-notice" size="18"></iconpark-icon>
                </button>
                <div class="volume-progress-wrap" id="volume-progress-wrap">
                    <div class="volume-progress">
                        <div class="volume-track" id="volume-track">
                            <div class="volume-slider" id="volume-slider" ref="slider">
                                <div class="volume-thumb" id="volume-thumb"></div>
                            </div>
                        </div>
                        <div class="volume-text" id="volume-text">{{volume+"%"}}</div>
                    </div>
                </div>
            </div>

            <button class="play-model-control bottom-music-button">
                <iconpark-icon name="play-cycle" size="18"></iconpark-icon>
            </button>

            <button class="playlist-control bottom-music-button">
                <iconpark-icon name="music-list" size="18"></iconpark-icon>
            </button>
            <label for="musicFiles" class="select-music-file bottom-music-button">
                <iconpark-icon name="folder-music" size="18"></iconpark-icon>
            </label>
            <input type="file" ref="musicFiles" id="musicFiles" accept="audio/mpeg" multiple style="display: none"
                   @change="openFile"/>
        </div>

    </div>
    <audio crossOrigin="anonymous" :src="currentMusic.url" preload="auto" id="myAudio" ref="myAudio" autoplay @play="onPlay" @pause="onPause"
           @canplay="onCanplay" @ended="onEndPlay"></audio>
</div>
<script type="module" src="js/index.js"></script>
</body>

</html>
